<!--
 * @Author: lixb
 * @Date: 2020-08-19 10:07:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-23 15:13:45
 * @Descripttion: 常用功能模块
-->
<template>
  <div>
    <el-card class="box-card">
      <div class="text item modul-title">
        <img src="@/assets/img/常用功能.png" style="height: 25px;width: 25px;margin-right: 10px;" />
        <span>常用功能</span>
        <img
          style="float: right;cursor: pointer;"
          src="@/assets/img/openMore.png"
          @click="editOftenMenu()"
        />
      </div>
      <div class="often-function">
        <div class="often-function-item">
          <div
            v-for="item in menuList"
            :key="item.authNo"
            class="more"
            @click="goMenu(item.authUrl)"
          >
            <div><img :src="item.authIcon" /></div>
            <div>{{ item.authName }}</div>
          </div>
          <div class="more" @click="showMoreMenu">
            <div><img src="@/assets/img/更多.png" /></div>
            <div>更多</div>
          </div>
        </div>
      </div>
    </el-card>
    <AllMenu ref="allMenuDrawer"></AllMenu>
    <AddOften
      :is-show="AddOftenMenu"
      @refreshOften="refreshOften"
      @closeDrawer="closeOftenMenu"
    ></AddOften>
  </div>
</template>

<script>
  import { getConfig } from '@/api/home';
  import AllMenu from './AllMenu.vue'; //所有菜单
  import AddOften from './AddOften.vue'; //新增常用工具
  export default {
    components: { AllMenu, AddOften },
    data() {
      return {
        AddOftenMenu: false,
        menuList: [],
      };
    },
    activated() {
      this.refreshOften();
    },
    methods: {
      refreshOften() {
        getConfig(1).then(res => {
          const { data = {} } = res;
          this.menuList = (data.menuConf && JSON.parse(data.menuConf)) || [];
        });
      },
      goMenu(menuPath) {
        this.$router.push(menuPath);
      },
      showMoreMenu() {
        this.$refs.allMenuDrawer.init();
      },
      editOftenMenu() {
        this.AddOftenMenu = true;
      },
      closeDrawer() {
        this.isShowAllMenu = false;
      },
      closeOftenMenu() {
        this.AddOftenMenu = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .modul-title * {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
  }
  .el-card.is-always-shadow {
    border-radius: 10px;
  }
  .often-function {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .often-function-item {
      img {
        width: 24px;
        height: 22px;
      }
      .more {
        cursor: pointer;
        width: 98px;
        white-space: nowrap;
        display: inline-block;
        height: 54px;
        text-align: center;
        div {
          color: #6d6e6e;
          font-size: 12px;
          margin-top: 15px;
        }
      }
    }
  }
</style>
